<template>
  <a-select v-model:value="selected">
    <a-select-option v-for="option in options" :key="option.uid" :value="option.uid"
      >{{ option.name }}
    </a-select-option>
  </a-select>
  <!--  <a-tree-select-->
  <!--    v-model:value="selected"-->
  <!--    tree-data-simple-mode-->
  <!--    style="width: 100%"-->
  <!--    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"-->
  <!--    :tree-data="treeData"-->
  <!--    placeholder="Please select"-->
  <!--    :load-data="onLoadData"-->
  <!--  />-->
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import { useHttpRequest } from '@/api/chunfeng/apiRequest'
import { useCategoryApi } from '@/api/chunfeng/category'

interface CategoryOption {
  name: string
  uid: string
}

export default defineComponent({
  name: 'CategorySelection',
  props: {
    value: {
      type: String,
      required: false,
      default: '',
    },
  },
  emits: ['categorySelected'],
  setup(props, context) {
    const selected = ref(props.value)
    const options = reactive(Array<CategoryOption>())

    watch(
      () => props.value,
      (newValue) => {
        selected.value = newValue
      },
    )
    watch(selected, (newValue) => {
      context.emit('categorySelected', newValue)
    })
    const { executeQueryRequest } = useHttpRequest()
    const { queryCategory } = useCategoryApi()

    executeQueryRequest(queryCategory({ leaf: true }), (data: CategoryOption[]) => {
      options.push(...data)
    })

    function reset() {
      selected.value = ''
    }

    return {
      selected,
      options,
      reset,
    }
  },
})
</script>

<style scoped>
.category-select {
  width: 70px;
}
</style>
